import React, { useEffect, useState } from 'react';

// 引入样式
import "../../../styles/HuYueYue/jihua.scss"

import { Input,Button,Modal,Form,Select,message , DatePicker } from 'antd';

// 一个接口数据
// import { staff_search } from '../../../../apis/staff'; 

// 引入底部的表单
import JiHuaForm from "../../../components/HuYueYue/JiHuaForm"

// 全部一次性导出来，用的话，直接用service.
import * as service from "../../../api/HuYueYue/jixiao";

// 这是弹出框的接口
// import * as service2 from "../../../../apis/staff.js"


const { RangePicker } = DatePicker;

function JiHua(props:any) {
 // 定义接收数据列表
 let [searchlist, setsearchlist] = useState([]);


 const [isModalOpen, setIsModalOpen] = useState(false);

 
 const { Search } = Input;

 const showModal = () => {
     setIsModalOpen(true);
 };

 const onFinish = (e:any) => {
    //  setIsModalOpen(false);
     console.log(e);  

    // 调新增计划的接口
     service.jixiao_jihua_add(e).then((res:any)=>{
         console.log(res);
         setIsModalOpen(false);
         if (res.data.state==200) {
            message.info("添加成功！");
         }
     })
     window.location.reload() // 强制页面刷新
 };

 const handleCancel = () => {
     setIsModalOpen(false);
 };
 
 //把搜索的封装成一个函数
 let search = ()=>{
    service.jixiao_jihua().then((res: any) => {
         console.log("绩效列表数据：",res.data);
         let arr = res.data.map((v: any, i: any) => {
            return {
               id:v.id,
               name: v.name,
               range: v.range,
               state:v.state,
               type:v.type,
               week:v.week,
               key: i,
            };
         });
         setsearchlist(arr);
      });
 }

 // 在生命周期里请求数据，可以让页面初始化就可以有数据
 useEffect(() => {
     search();
 }, []);

 return (
     <div className='jihua'>
         <div className='jihua-text'>绩效 &gt;考核计划</div>
         <div className='jihua-input'>
            <span>周期类型</span>

             {/* 新增计划 */}

             <Button type="primary" onClick={showModal} className="primary-button">
                 新增考核计划
             </Button>
             <Modal title="新增" open={isModalOpen} onCancel={handleCancel} footer={null}>
             <Form
                 name="basic"
                 labelCol={{ span: 6 }}
                 wrapperCol={{ span: 16 }}
                 initialValues={{ remember: true }}
                 autoComplete="off"
                 onFinish={onFinish}
             >
                    <Form.Item
                        label="考核计划名称"
                        name="name"
                        rules={[{ required: true, message: '请输入考核计划名称！'}]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="考核范围"
                        name="range"
                        rules={[{ required: true, message: '请输入正确的考核范围！'}]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="考核周期类型"
                        name="type"
                        rules={[{ required: true, message: '请输入考核周期类型！' }]}
                    >
                        <Select>
                            <Select.Option value="季度">季度</Select.Option>
                            <Select.Option value="月度">月度</Select.Option>
                            <Select.Option value="半月度">半月度</Select.Option>
                            <Select.Option value="半年度">半年度</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="考核状态"
                        name="state"
                        rules={[{ required: true, message: '请输入考核周期类型！' }]}
                    >
                        <Select>
                            <Select.Option value="未开始">未开始</Select.Option>
                            <Select.Option value="已开始">已开始</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="考核周期"
                        name="week"
                        rules={[{ required: true, message: '请输入考核周期！' }]}
                    >
                        <RangePicker />
                    </Form.Item>

                 <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                     <Button type="primary" htmlType="submit">
                         提交
                     </Button>
                 </Form.Item>
                 </Form>
             </Modal>

         </div>
         <JiHuaForm listKey={searchlist}></JiHuaForm>
     </div>
 );
}

export default JiHua;